<template>

  <div>

    <div id="NavSlide">
      <nav>
        <p v-for="item in categary" :key="item.id">
          {{item.name}}
        </p>
      </nav>
    </div>

    <listDetail :detailId='detailId'></listDetail>

  </div>

</template>
<script>

  import listDetail from './listDetail.vue';

  export default {
    name: "index",
    components:{
      listDetail:listDetail,
    },
    data:function(){
      return {
        categary: {},
        detailId:1
      }
    },
    created(){
      this.$axios.get('/share/categary')
        .then(res => {
          this.categary = res.data.categary;
        })
        .catch(err => console.log(err))
    }
  }


</script>

<style>

  #NavSlide nav{
    display: flex;
    overflow: auto;
    background-color: #81a794;
  }

  #NavSlide p{
    flex-shrink: 0;
    padding: 10px;
    color: #E5E5E5;
  }

</style>
